<!-- 电影编辑 -->

<template>
  <div class="main-context">
    <t-form style="width:600px;padding: 30px 0;" labelWidth="150px" :rules="rules" ref="form" :data="formData" :disabled="isLook" @submit="onSubmit">
      <template v-for="(item, key) in formDataList" :key="key">
        <t-form-item :label="item.label" :name="key" class="role-item" v-if="item.isSelect">
          <t-select
            v-model="formData[key]"
            placeholder="-请选择-"
            :options="formDataList[key].options"
            filterable
          />
        </t-form-item>
        <t-form-item :label="item.label" :name="key" v-else-if="item.isTextarea">
          <t-textarea  v-model="formData[key]" :placeholder="item.placeholder || `请输入${item.label}`" />
        </t-form-item>
        <t-form-item :label="item.label" :name="key" v-else-if="item.isDate">
          <t-date-picker style="width: 100%;" v-model="formData[key]" :placeholder="item.placeholder || `请输入${item.label}`" />
        </t-form-item>
        <t-form-item :label="item.label" :name="key" v-else>
          <t-input v-model="formData[key]" :placeholder="item.placeholder || `请输入${item.label}`" />
        </t-form-item>
      </template>
      <t-form-item>
        <t-space :size="15">
          <t-button theme="default" @click="$router.back()">返回</t-button>
          <t-button theme="primary" type="submit" :disabled="disabled">确定</t-button>
        </t-space>
      </t-form-item>
    </t-form>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { movieAdd, movieUpdate, getMovieAreaList, getMovieTypeList, getMovieInfo } from '@/api/movie'
import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next'
import { getFormData, getRule } from './cols'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const { id, isLook } = route.query
if (id) {
  // 修改时获取数据
  getMovieInfo({ id }).then(res => {
    formData.value = res.data
  })
}
const formDataList = getFormData()

const formData = ref({})
const disabled = ref(false)
const rules = getRule()
const onSubmit = ({ validateResult }) => {
  if (validateResult === true) {
    disabled.value = true
    const send = id ? movieUpdate : movieAdd
    send(formData.value).then(res => {
      const tip = DialogPlugin({
        theme: 'success',
        header: '操作成功',
        body: '是否返回列表页面',
        confirmBtn: '返回',
        onConfirm () {
          tip.hide()
          router.back()
        },
        onClose () {
          tip.hide()
        }
      })
    }).catch(err => {
      MessagePlugin.error({
        content: err.msg,
        duration: 2000
      })
    }).finally(() => {
      disabled.value = false
    })
  }
  console.log(formData.value)
}
// 获取地区列表以供选择
getMovieAreaList().then(res => {
  formDataList.areaId.options = []
  res.data.forEach(item => {
    formDataList.areaId.options.push({ label: item.name, value: item.id })
  })
})
getMovieTypeList().then(res => {
  formDataList.typeId.options = []
  res.data.forEach(item => {
    formDataList.typeId.options.push({ label: item.name, value: item.id })
  })
})

</script>
<style scoped>
</style>
